<template>
  <div class="search-result-list">
    <a-table
      :loading="loading"
      :pagination="false"
      :columns="columns"
      :dataSource="wordList"
      :rowKey="({id}) => id"
    >
      <template slot="operation">
        <a-button class="edit-btn">编辑</a-button>
        <a-button class="btn">删除</a-button>
      </template>
    </a-table>
    <pagination
        :total="total"
        @loadDataList="getWordlist"
        ref="pageBand"
    />
  </div>
</template>

<script>
import { SensitiveWordsList } from '../../store/action'
export default {
  data() {
    return {
      total: 0,
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'listId'
        },
        {
          title: '敏感词',
          dataIndex: 'word'
        },
        {
          title: '时间',
          dataIndex: 'created_at'
        },
        {
          title: '操作',
          width: 200,
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      wordList: []
    }
  },
  methods: {
    getWordlist(info) {
      this.loading = true
      SensitiveWordsList({
        num: info.pageSize,
        page: info.page
      })
        .then(res => {
          this.loading = false
          this.wordList = res.data.list.map((item, index) => {
            item.listId = (info.page - 1) * info.pageSize + (index + 1)
            return item
          })
          this.loading = false
          this.total = res.data.total_num
        })
        .catch(error => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.ant-table-wrapper{
  margin-top: 0;
}
.btn {
  margin-left: 20px;
  background: #f30c0c;
  color: #fff;
}
.edit-btn {
  background: #cc6427;
  color: #fff;
}
</style>